<template>
  <div class="cart">
    <Navbar class="cart-bar">
      <template slot="center"> 购物车({{ producLength }}) </template>
    </Navbar>
    <CartList />
    <BottomBar />
  </div>
</template>

<script>
import Navbar from '@/components/content/navbar/'

import CartList from '@/components/common/cart/cartList'
import BottomBar from '@/components/common/cart/BottomBar';

import { mapGetters } from 'vuex'
export default {
  name: 'cart',
  components: {
    Navbar,
    CartList,
    BottomBar
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['producLength']),
  },
  
  methods: {},
}
</script>
<style scoped>
.cart-bar {
  background-color: var(--color-tint);
  color: #fff;
  position: relative;
  z-index: 5;
}
</style>
